import React, { useState } from 'react';
import style from './index.less';
import { history } from 'umi';
import moment from 'moment';
export default function Index() {
  const [show, setshow] = useState(false);
  const [list, setlist] = useState([
    {
      id: 1,
      city: '河北省保定市河北科技学院',
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
      dan: '180****5146',
      distance: '6.3',
      key: '1',
      show: false,
      num: 115.465863,
      nums: 38.883432,
    },
    {
      id: 2,
      city: '河北省保定市保定理工学院',
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
      dan: '146****5155',
      distance: '5.9',
      key: '2',
      show: false,
      num: 115.511712,
      nums: 38.862196,
    },
  ]);
  const [datas, setdata] = useState([]);
  console.log(datas);
  const dian = (id) => {
    let data = [...list];
    let idx = data.findIndex((item) => item.id == id);
    console.log(idx);
    setdata([data[idx]]);
    data[idx].show = true;
    setlist(data);
  };
  const del = (id) => {
    let data = [...list];
    let idx = data.findIndex((item) => item.id == id);

    data.splice(idx, 1);
    setlist(data);
  };
  const zuo = () => {
    history.push('/ditu', { state: datas });
  };
  return (
    <div>
      <div className={style.top}>
        <div className={style.you}>
          <img
            src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13619.png"
            alt=""
            onClick={() => history.push('/sixin')}
          />
        </div>
      </div>
      <div className={style.bei}>
        <div className={style.tou}>
          <div
            style={{
              color: show ? 'rgb(211, 210, 210)' : 'rgb(42, 202, 42)',
              fontWeight: show ? '' : 'bold',
            }}
            onClick={() => setshow(false)}
          >
            待接单
          </div>
          <div
            style={{
              color: show ? 'rgb(42, 202, 42)' : 'rgb(211, 210, 210)',
              fontWeight: show ? 'bold' : '',
            }}
            onClick={() => setshow(true)}
          >
            进行中
          </div>

          <span className={style.d2}>
            <div className={style.zou5}>
              {list
                .filter((item) => item.show == false)
                .map((item, index) => {
                  return (
                    <div className={style.kuang} key={item.id}>
                      <div className={style.shang}>
                        <div className={style.zi}>距离{item.distance}km</div>
                        <div className={style.zi1}>{item.key}#</div>{' '}
                      </div>

                      <div className={style.jian}>
                        <div className={style.di}>
                          <div>
                            <img
                              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13460.png"
                              alt=""
                            />
                          </div>

                          <div className={style.di1}> {item.city}</div>
                        </div>
                        <div className={style.shi}>
                          <div>
                            <img
                              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13474.png"
                              alt=""
                            />
                          </div>
                          <div className={style.shi1}>
                            上门时间 : {item.time}
                          </div>
                        </div>
                      </div>
                      <div className={style.bian}>
                        TC_ZY <span>{item.dan}</span>{' '}
                      </div>
                      <div className={style.dan}>
                        <div className={style.dan1}></div>
                        <div
                          className={style.dan2}
                          onClick={() => dian(item.id)}
                        >
                          接单
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>

            <div className={style.you5}>
              {list
                .filter((item) => item.show == true)
                .map((item, index) => {
                  return (
                    <div className={style.kuang} key={item.id} onClick={zuo}>
                      <div className={style.shang}>
                        <div className={style.zi}>回收订单: &nbsp; 回收中</div>
                        <div className={style.zi1}>{item.key}#</div>{' '}
                      </div>

                      <div className={style.jian}>
                        <div className={style.di}>
                          <div>
                            <img
                              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13460.png"
                              alt=""
                            />
                          </div>

                          <div className={style.di1}> {item.city}</div>
                        </div>
                        <div className={style.shi}>
                          <div>
                            <img
                              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13474.png"
                              alt=""
                            />
                          </div>
                          <div className={style.shi1}>
                            上门时间 : {item.time}
                          </div>
                        </div>
                      </div>
                      <div className={style.bian}>
                        TC_ZY <span>{item.dan}</span>{' '}
                      </div>
                      <div className={style.dan}>
                        <div className={style.dan1}></div>
                        <div className={style.dan2}>结算</div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </span>
        </div>
      </div>
    </div>
  );
}
